<script setup>
import {inject} from "vue";
const {baseInfo,workInfo,skillsInfo,projectInfo,schoolInfo,selfInfo,themeColor,typography,spacing,mode} = inject('data')

// 从baseInfo中提取自定义模块（第6个及以后的元素）
const customModules = baseInfo.slice(6)
console.log(customModules)
</script>

<template>
  <div class="resume-a4-container">
    <!-- 头部信息区域 -->
    <header class="resume-header">
      <div class="header-content">
        <!-- 头像区域 -->
        <div class="avatar-container" v-if="baseInfo[0].materialList[0].isShow" 
             :style="{
               'width': baseInfo[0].materialList[0].width+'px' || '90px',
               'height': baseInfo[0].materialList[0].height+'px' || '90px'
             }">
          <el-image :src="baseInfo[0].materialList[0].url" fit="cover"></el-image>
        </div>
        
        <!-- 个人信息 -->
        <div class="personal-info">
          <h1 class="name">{{ baseInfo[0].baseInfoList[0].value }}</h1>
          <h2 class="title">{{ baseInfo[0].baseInfoList[1].value }}</h2>
          
          <div class="contact-info">
            <template v-for="(item, index) in [...baseInfo[0].baseInfoList.slice(2), ...baseInfo[0].customList]" :key="index">
              <div class="contact-item" v-if="item.isShow">
                <el-icon class="icon"><component :is="item.icon ||'Grid'" /></el-icon>
                <span>{{ item.value }}</span>
              </div>
            </template>
          </div>
        </div>
      </div>
    </header>

    <!-- 主体内容区域 -->
    <main class="resume-body">
      <!-- 左侧主要内容 -->
      <div class="main-content">
        <!-- 个人简介 -->
        <section class="section" v-if="selfInfo.isShow">
          <h3 class="section-title">{{ selfInfo.title }}</h3>
          <div class="section-content" v-html="selfInfo.value"></div>
        </section>
        
        <!-- 工作经验 -->
        <section class="section" v-if="workInfo.isShow">
          <h3 class="section-title">{{ workInfo.title }}</h3>
          <div class="experience-list">
            <template v-for="(e, index) in workInfo.itemList" :key="index">
              <div class="experience-item" v-if="e.isShow">
                <div class="experience-header">
                  <div class="company">{{ e.itemInfo.companyName.value || '' }}</div>
                  <div class="position">{{ e.itemInfo.workPost.value || '' }}</div>
                  <div class="period">{{ e.itemInfo.workTime.value || '' }}</div>
                </div>
                <div class="experience-details" v-html="e.itemInfo.itemContent.value"></div>
              </div>
            </template>
          </div>
        </section>
        
        <!-- 项目经历 -->
        <section class="section" v-if="projectInfo.isShow">
          <h3 class="section-title">{{ projectInfo.title }}</h3>
          <div class="project-list">
            <template v-for="(e, index) in projectInfo.itemList" :key="index">
              <div class="project-item" v-if="e.isShow">
                <div class="project-header">
                  <div class="project-name">{{ e.itemInfo.projectName.value || '' }}</div>
                  <div class="project-role">{{ e.itemInfo.projectRole.value || '' }}</div>
                  <div class="project-period">{{ e.itemInfo.projectTime.value || '' }}</div>
                </div>
                <div class="project-details" v-html="e.itemInfo.itemContent.value"></div>
              </div>
            </template>
          </div>
        </section>

        <!-- 自定义模块 - 左侧 -->
        <template v-for="(module, index) in customModules" :key="index">
          <section class="section" v-if="module.isShow ">
            <h3 class="section-title">{{ module.title }}</h3>
            <div class="section-content" v-html="module.value"></div>
          </section>
        </template>
      </div>
      
      <!-- 右侧次要内容 -->
      <div class="sidebar">
        <!-- 专业技能 -->
        <section class="section" v-if="skillsInfo.isShow">
          <h3 class="section-title">{{ skillsInfo.title }}</h3>
          <div class="section-content" v-html="skillsInfo.value"></div>
        </section>
        
        <!-- 教育背景 -->
        <section class="section" v-if="schoolInfo.isShow">
          <h3 class="section-title">{{ schoolInfo.title }}</h3>
          <div class="education-list">
            <template v-for="(e, index) in schoolInfo.itemList" :key="index">
              <div class="education-item" v-if="e.isShow">
                <div class="education-header">
                  <div class="school">{{ e.itemInfo.schoolName.value || '' }}</div>
                  <div class="degree">{{ e.itemInfo.schoolDegree.value || '' }}</div>
                </div>
                <div class="major">{{ e.itemInfo.schoolMajor.value || '' }}</div>
                <div class="period">
                  {{ (e.itemInfo.schoolStartTime.value || '') + ' - ' + (e.itemInfo.schoolEndTime.value || '') }}
                </div>
              </div>
            </template>
          </div>
        </section>

        <!-- 自定义模块 - 右侧
        <template v-for="(module, index) in customModules" :key="index">
          <section class="section" v-if="module.isShow && index%2!==0">
            <h3 class="section-title">{{ module.title }}</h3>
            <div class="section-content" v-html="module.value"></div>
          </section>
        </template> -->
      </div>
    </main>
  </div>
</template>

<style scoped>
.resume-a4-container {
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  color: v-bind('typography.fontColor.value');
  width: 210mm; /* A4宽度 */
  min-height: 297mm; /* A4高度 */
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  box-sizing: border-box;
  padding: 10mm; /* 四周留白 */
}

.resume-header {
  background-color: v-bind('themeColor.color');
  color: white;
  padding: 15px 25px;
  margin-bottom: 15px;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 25px;
}

.avatar-container {
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.avatar-container .el-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.personal-info {
  flex: 1;
}

.name {
  font-size: 22pt;
  font-weight: 700;
  margin: 0 0 5px 0;
  line-height: 1.2;
}

.title {
  font-size: 14pt;
  font-weight: 400;
  margin: 0 0 12px 0;
  opacity: 0.9;
}

.contact-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  font-size: 10pt;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.contact-item .icon {
  font-size: 14px;
}

.resume-body {
  display: flex;
  gap: 20px;
}

.main-content {
  flex: 2;
}

.sidebar {
  flex: 1;
  border-left: 1px solid #eee;
  padding-left: 15px;
}

.section {
  margin-bottom: 20px;
}

.section-title {
  color: v-bind('themeColor.color');
  font-size: 14pt;
  font-weight: 600;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 2px solid v-bind('themeColor.color');
}

.section-content {
  line-height: 1.5;
  font-size: 10pt;
}

.section-content ul {
  padding-left: 20px;
}

.section-content li {
  margin-bottom: 5px;
}

.experience-item, 
.project-item,
.education-item {
  margin-bottom: 15px;
}

.experience-header, 
.project-header, 
.education-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 3px;
  align-items: baseline;
  flex-wrap: wrap;
}

.company, 
.project-name, 
.school {
  font-weight: 600;
  font-size: 11pt;
  flex: 1;
  min-width: 40%;
}

.position, 
.project-role, 
.degree {
  margin: 0 10px;
  text-align: v-bind('mode.subTitleMode.value ? "center" : "left"');
  color: #666;
  font-size: 10pt;
  flex: 1;
  min-width: 30%;
}

.period, 
.project-period {
  color: #888;
  font-size: 9pt;
  min-width: 20%;
  text-align: right;
}

.major {
  color: #666;
  font-size: 10pt;
  margin-bottom: 3px;
}

.experience-details, 
.project-details,
.education-details {
  font-size: 10pt;
  line-height: 1.5;
}

/* 打印优化 */
@media print {
  .resume-a4-container {
    box-shadow: none;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
  }
  
  body {
    margin: 0;
    padding: 0;
    background: none;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
  
  .resume-body {
    flex-direction: column;
  }
  
  .sidebar {
    border-left: none;
    border-top: 1px solid #eee;
    padding-left: 0;
    padding-top: 15px;
    margin-top: 15px;
  }
  
  .contact-info {
    grid-template-columns: 1fr;
    justify-items: center;
  }
}
</style>